<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2022-10-14 15:21:22
-->
<template>
  <CDrawer
    v-model:visible="dialogVisible"
    :title="detailInfo.factorName"
    :tips="detailInfo.enName || '-'"
  >
    <div class="inventory-factor-detail-container" v-if="dialogVisible">
      <CDetailCellGroup title="基本信息" class="g-mt8">
        <CDetailCellItem label="因子类型">{{
          factorTypeEnumx[detailInfo.type as keyof typeof factorTypeEnumx] || '-'
        }}</CDetailCellItem>
        <CDetailCellItem label="活动数据单位" :value="detailInfo.dataUnit"></CDetailCellItem>
        <CDetailCellItem label="因子来源类型">{{
          FactorSourceTypeMap[detailInfo.sourceType as keyof typeof FactorSourceTypeMap] || '-'
        }}</CDetailCellItem>
        <CDetailCellItem label="因子来源" :value="detailInfo.source"></CDetailCellItem>
        <CDetailCellItem label="版本号" :value="detailInfo.version"></CDetailCellItem>
      </CDetailCellGroup>
      <CDetailCellGroup title="因子排放系数" :hasDivider="false">
        <CTable
          use-data-source
          :data-source="tableData1"
          border
          :pagination="false"
          :extra-table-option="{ showHeader: false }"
        >
          <vxe-column field="emission" title="温室气体" width="140" />
          <vxe-column field="emissionNum" title="排放系数">
            <template #default="scope">
              {{ empty(scope.row.emissionNum) }} {{ empty(scope.row.unit) }}
            </template>
          </vxe-column>
        </CTable>
      </CDetailCellGroup>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'InventoryFactorDetail'
};
</script>
<script lang="ts" setup>
import {
  defineProps,
  withDefaults,
  defineEmits,
  computed,
  ref,
  watch,
  reactive,
  nextTick
} from 'vue';
import * as obj from './rules';
import { getFactor } from '@/apis/system/config/factorList';
import { factorTypeEnumx, FactorSourceTypeMap } from '@/constants/enum';
import { empty } from '@/utils';
import { CDrawer } from '@/components/CDrawer';
import { CTable } from '@/components/CTable';
import { CDetailCellGroup, CDetailCellItem } from '@/components/CDetailGroup';

interface SelectFillTypeDialogProps {
  visible: boolean;
  info: any;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => props.info,
  info => {
    if (info) {
      init();
      getFactor(props.info.factorNo).then(res => {
        detailInfo.factorName = res.factorName;
        detailInfo.enName = res.enName;
        detailInfo.type = res.type;
        detailInfo.dataUnit = res.dataUnit;
        detailInfo.unit = res.unit;
        detailInfo.gwpVersion = res.gwpVersion;
        detailInfo.sourceType = res.sourceType;
        detailInfo.source = res.source;
        detailInfo.version = res.version;
        unit.value = detailInfo.unit.split('/')[0];
        nextTick(() => {
          tableData.value = JSON.parse(JSON.stringify(obj.tableData));

          tableData.value[0].emissionNum = empty(res.coEmission);
          tableData.value[0].unit = `${unit.value}${tableData.value[0].unit}/${detailInfo.dataUnit}`;
          tableData.value[0].gwp = res.coGwp;

          tableData.value[1].emissionNum = empty(res.chEmission);
          tableData.value[1].unit = `${unit.value}${tableData.value[1].unit}/${detailInfo.dataUnit}`;
          tableData.value[1].gwp = res.chGwp;

          tableData.value[2].emissionNum = empty(res.noEmission);
          tableData.value[2].unit = `${unit.value}${tableData.value[2].unit}/${detailInfo.dataUnit}`;
          tableData.value[2].gwp = res.noGwp;

          tableData.value[3].emissionNum = empty(res.hpEmission);
          tableData.value[3].unit = `${unit.value}${tableData.value[3].unit}/${detailInfo.dataUnit}`;
          tableData.value[3].gwp = res.hpGwp;

          tableData.value[4].emissionNum = empty(res.sfEmission);
          tableData.value[4].unit = `${unit.value}${tableData.value[4].unit}/${detailInfo.dataUnit}`;
          tableData.value[4].gwp = res.sfGwp;

          tableData.value[5].emissionNum = empty(res.nfEmission);
          tableData.value[5].unit = `${unit.value}${tableData.value[5].unit}/${detailInfo.dataUnit}`;
          tableData.value[5].gwp = res.nfGwp;

          tableData1.value = tableData.value.filter((itm: any) => {
            return itm.emissionNum != '-';
          });
        });
      });
    }
  }
);

const tableData = ref<any[]>([]);
const tableData1 = ref<any[]>([]);
const loading = ref(false);
const unit = ref();
const detailInfo = reactive({
  factorName: '',
  enName: '',
  type: '',
  dataUnit: '',
  unit: '',
  gwpVersion: '',
  sourceType: '',
  source: '',
  version: ''
});
function init() {
  loading.value = false;
}
</script>
<style lang="scss" scoped>
.inventory-factor-detail-container {
  :deep(.vxe-table--body) {
    .vxe-body--row .vxe-body--column:first-child {
      background-color: #f3f7fb;
    }
  }
}
:deep(.c-base-table.vxe-table .vxe-cell) {
  line-height: 20px;
}
</style>
